<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<!-- 知识梳理:
				 
					1.生命周期函数的方法名称 必须固定.
					2.生命周期函数是VUE对象特有的函数.应该放到根目录下.
					3.当页面渲染成功之后, 一共执行了4个生命周期方法.
						第一类: VUE对象的创建.
							beforeCreate:对象创建前调用
							created: VUE对象已经创建完成之后调用	
						第二类: VUE对象的挂载(渲染)
							beforeMount:  el : "#app",VUE对象在找到@APP标签之前先执行该函数.
							mounted: 当挂载完成(渲染完成),用户可以看到页面数据之后调用该函数
					
					4. 用户修改阶段:
						第三类:
							beforeUpdate: 当用户修改数据 点击"回车" 之后调用该函数
							过渡: 数据已经被修改
							updated: 数据已经被修改之后调用该函数
					5. 销毁阶段:
						 销毁函数,VUE对象默认不会调用. 可以通过函数由用户调用
						 beforeDestroy: 在销毁方法执行前
						 destroyed:     标志着VUE对象已经销毁.
						 
				-->
		<div id="app">
			<h3 v-text="msg"></h3>
			<button @click="destroy">销毁</button>
		</div>

		<!--引入js函数类库  -->
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					msg: "vue生命周期"
				},
				methods: {

				},

				//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
				beforeCreate() {
					console.log("beforeCreate")
				},
				//在实例创建完成后被立即调用
				created() {
					console.log("created")
				},
				//在挂载开始之前被调用：相关的 render 函数首次被调用。
				beforeMount() {
					console.log("beforeMount")
				},
				//实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
				mounted() {
					console.log("mounted")
				},
				//数据更新时调用，发生在虚拟 DOM 打补丁之前
				beforeUpdate() {
					console.log("beforeUpdate")
				},
				//由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
				updated() {
					console.log("updated")
				},
				//实例销毁之前调用。在这一步，实例仍然完全可用
				beforeDestroy() {
					console.log("beforeDestroy")
				},
				//实例销毁后调用。
				destroyed() {
					console.log("destroyed")
				},
				methods: {
					destroy() {
						this.$destroy()
					}
				}
			})
		</script>
	</body>
</html>
